<template>
  <div class="login">
    <h1>登陆页面</h1>
    <el-form label-width="80px" :model="loginData">
      <el-form-item label="账号">
        <el-input placeholder="请输入账号" v-model="loginData.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input placeholder="请输入密码" v-model="loginData.password" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="subFun" class="sub-btn" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { ElMessage } from 'element-plus'
import router from '../router/index'

export default defineComponent({
  name: "Login",
  setup() {
    let loginData = reactive({
      name: "",
      password: ""
    });

    let subFun = () => {
      if (!loginData.name || !loginData.password){
        ElMessage.warning({
            message: '请先输入账号和密码！',
            type: 'warning'
          });
          return
      }
      //执行登录操作
      console.log(loginData.password + '|' +loginData.name)
      router.push('/Home')
    };
    return {
      loginData,
      subFun
    };
  },
  components: {}
});
</script>

<style scoped>
.login {
  width: 500px;
  margin: 150px auto;
  border: 1px solid green;
  border-radius: 10px;
  padding: 20px;
}
.sub-btn {
  width: 100%;
}
</style>